<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>配图视图 | 新浪微博开发笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.1.0">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
    

        
    
    
    <link rel="next" href="../homepage/retweeted_status.html" />
    
    
    <link rel="prev" href="../homepage/prepare for pictureview.html" />
    

        
    </head>
    <body>
        
        
    <div class="book" data-level="0.8.7" data-basepath=".." data-revision="Wed Oct 14 2015 07:05:46 GMT+0800 (CST)">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
        
        
        

        

        
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                        <i class="fa fa-check"></i>
                        
                        新浪微博笔记
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.1" data-path="project init/prepare project.html">
            
                
                    <a href="../project init/prepare project.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.</b>
                        
                        准备工作
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.1.1" data-path="project init/project deploy.html">
            
                
                    <a href="../project init/project deploy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.1.</b>
                        
                        项目部署
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.1.2" data-path="project init/project settings.html">
            
                
                    <a href="../project init/project settings.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.2.</b>
                        
                        项目设置
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.1.3" data-path="project init/confirm architecture.html">
            
                
                    <a href="../project init/confirm architecture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.3.</b>
                        
                        架构确定
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.1.4" data-path="project init/mvvm.html">
            
                
                    <a href="../project init/mvvm.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.4.</b>
                        
                        MVVM
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.2" data-path="create project/readme.html">
            
                
                    <a href="../create project/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.</b>
                        
                        项目搭建
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.2.1" data-path="create project/create files.html">
            
                
                    <a href="../create project/create files.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.1.</b>
                        
                        创建文件
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.2.2" data-path="create project/add child controllers.html">
            
                
                    <a href="../create project/add child controllers.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.2.</b>
                        
                        添加子控制器
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.2.3" data-path="create project/custom main tabbar.html">
            
                
                    <a href="../create project/custom main tabbar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.3.</b>
                        
                        自定义 TabBar
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.2.4" data-path="create project/summary.html">
            
                
                    <a href="../create project/summary.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.4.</b>
                        
                        阶段性小结
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.3" data-path="visitor/readme.html">
            
                
                    <a href="../visitor/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.</b>
                        
                        访客视图
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.3.1" data-path="visitor/base table view controller.html">
            
                
                    <a href="../visitor/base table view controller.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.1.</b>
                        
                        表格视图控制器基类
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.3.2" data-path="visitor/visitor login view.html">
            
                
                    <a href="../visitor/visitor login view.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.</b>
                        
                        用户登录视图
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.3.3" data-path="visitor/setup login info.html">
            
                
                    <a href="../visitor/setup login info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.3.</b>
                        
                        设置未登录信息
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.3.4" data-path="visitor/home animation.html">
            
                
                    <a href="../visitor/home animation.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.4.</b>
                        
                        首页动画
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.3.5" data-path="visitor/login buttons delegate.html">
            
                
                    <a href="../visitor/login buttons delegate.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.5.</b>
                        
                        登录&amp;注册代理回调
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.3.6" data-path="visitor/appearance.html">
            
                
                    <a href="../visitor/appearance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.6.</b>
                        
                        导航栏全局外观
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.4" data-path="frameworks/readme.html">
            
                
                    <a href="../frameworks/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.</b>
                        
                        第三方框架
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.4.1" data-path="frameworks/afnetworking.html">
            
                
                    <a href="../frameworks/afnetworking.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.1.</b>
                        
                        AFNetworking
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.4.2" data-path="frameworks/svprogresshud sdwebimage.html">
            
                
                    <a href="../frameworks/svprogresshud sdwebimage.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.2.</b>
                        
                        SVProgressHUD 和 SDWebImage
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.4.3" data-path="frameworks/snapkit.html">
            
                
                    <a href="../frameworks/snapkit.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.3.</b>
                        
                        SnapKit
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.5" data-path="oauth/readme.html">
            
                
                    <a href="../oauth/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.</b>
                        
                        OAuth
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.5.1" data-path="oauth/register app.html">
            
                
                    <a href="../oauth/register app.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.1.</b>
                        
                        注册应用程序
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.5.2" data-path="oauth/load oauth page.html">
            
                
                    <a href="../oauth/load oauth page.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.2.</b>
                        
                        加载授权页面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.6" data-path="access token/readme.html">
            
                
                    <a href="../access token/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.</b>
                        
                        Access Token
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.6.1" data-path="access token/load access token.html">
            
                
                    <a href="../access token/load access token.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.1.</b>
                        
                        加载 AccessToken
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.2" data-path="access token/user account.html">
            
                
                    <a href="../access token/user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.2.</b>
                        
                        用户账户模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.3" data-path="access token/expires date.html">
            
                
                    <a href="../access token/expires date.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.3.</b>
                        
                        过期日期
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.4" data-path="access token/load user info.html">
            
                
                    <a href="../access token/load user info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.4.</b>
                        
                        加载用户信息
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.5" data-path="access token/archive user account.html">
            
                
                    <a href="../access token/archive user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.5.</b>
                        
                        归档 &amp; 解档
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.6" data-path="access token/view model.html">
            
                
                    <a href="../access token/view model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.6.</b>
                        
                        视图模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.6.7" data-path="access token/error enum.html">
            
                
                    <a href="../access token/error enum.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.7.</b>
                        
                        自定义错误枚举
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.7" data-path="newfeature/index.html">
            
                
                    <a href="../newfeature/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.</b>
                        
                        新特性和欢迎界面
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.7.1" data-path="newfeature/newfeature.html">
            
                
                    <a href="../newfeature/newfeature.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.1.</b>
                        
                        新特性
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.7.2" data-path="newfeature/welcome.html">
            
                
                    <a href="../newfeature/welcome.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.2.</b>
                        
                        欢迎界面
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.7.3" data-path="newfeature/switch vc.html">
            
                
                    <a href="../newfeature/switch vc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.3.</b>
                        
                        切换界面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.8" data-path="homepage/index.html">
            
                
                    <a href="../homepage/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.</b>
                        
                        首页布局
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.8.1" data-path="homepage/status model.html">
            
                
                    <a href="../homepage/status model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.1.</b>
                        
                        微博数据模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.2" data-path="homepage/tableview show data.html">
            
                
                    <a href="../homepage/tableview show data.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.2.</b>
                        
                        显示表格数据
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.3" data-path="homepage/user model.html">
            
                
                    <a href="../homepage/user model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.3.</b>
                        
                        用户模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.4" data-path="homepage/status view model.html">
            
                
                    <a href="../homepage/status view model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.4.</b>
                        
                        微博视图模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.5" data-path="homepage/custom cell.html">
            
                
                    <a href="../homepage/custom cell.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.5.</b>
                        
                        自定义 Cell
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.6" data-path="homepage/prepare for pictureview.html">
            
                
                    <a href="../homepage/prepare for pictureview.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.6.</b>
                        
                        配图视图准备
                    </a>
                
            
            
        </li>
    
        <li class="chapter active" data-level="0.8.7" data-path="homepage/picture view.html">
            
                
                    <a href="../homepage/picture view.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.7.</b>
                        
                        配图视图
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.8" data-path="homepage/retweeted_status.html">
            
                
                    <a href="../homepage/retweeted_status.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.8.</b>
                        
                        转发微博
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.8.9" data-path="homepage/single picture.html">
            
                
                    <a href="../homepage/single picture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.9.</b>
                        
                        单张图片比例
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.9" data-path="refresh/index.html">
            
                
                    <a href="../refresh/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.9.</b>
                        
                        刷新
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.9.1" data-path="refresh/pullup view.html">
            
                
                    <a href="../refresh/pullup view.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.9.1.</b>
                        
                        上拉刷新控件
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.9.2" data-path="refresh/refresh data.html">
            
                
                    <a href="../refresh/refresh data.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.9.2.</b>
                        
                        刷新数据
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.9.3" data-path="refresh/pulldown tips.html">
            
                
                    <a href="../refresh/pulldown tips.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.9.3.</b>
                        
                        下拉刷新提示
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.10" data-path="compose/index.html">
            
                
                    <a href="../compose/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.10.</b>
                        
                        发布微博
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.10.1" data-path="compose/setup ui.html">
            
                
                    <a href="../compose/setup ui.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.10.1.</b>
                        
                        搭建界面
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.10.2" data-path="compose/select picture.html">
            
                
                    <a href="../compose/select picture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.10.2.</b>
                        
                        选择照片
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.10.3" data-path="compose/post status.html">
            
                
                    <a href="../compose/post status.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.10.3.</b>
                        
                        发布微博
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.11" data-path="emoticon/index.html">
            
                
                    <a href="../emoticon/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.</b>
                        
                        表情键盘
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.11.1" data-path="emoticon/prepare ui.html">
            
                
                    <a href="../emoticon/prepare ui.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.1.</b>
                        
                        准备界面
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.2" data-path="emoticon/load bundle data.html">
            
                
                    <a href="../emoticon/load bundle data.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.2.</b>
                        
                        加载模型数据
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.3" data-path="emoticon/show emoticon.html">
            
                
                    <a href="../emoticon/show emoticon.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.3.</b>
                        
                        显示表情符号
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.4" data-path="emoticon/upgrade model.html">
            
                
                    <a href="../emoticon/upgrade model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.4.</b>
                        
                        提升数据模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.5" data-path="emoticon/selected emoticon.html">
            
                
                    <a href="../emoticon/selected emoticon.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.5.</b>
                        
                        选中表情事件
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.6" data-path="emoticon/attribute text.html">
            
                
                    <a href="../emoticon/attribute text.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.6.</b>
                        
                        属性文本
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.7" data-path="emoticon/merge_emoticon.html">
            
                
                    <a href="../emoticon/merge_emoticon.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.7.</b>
                        
                        整合到新浪微博
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.11.8" data-path="emoticon/favorite emoticon.html">
            
                
                    <a href="../emoticon/favorite emoticon.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.11.8.</b>
                        
                        内存表情排序
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.12" data-path="sqlite/index.html">
            
                
                    <a href="../sqlite/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.12.</b>
                        
                        数据缓存
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.12.1" data-path="sqlite/data model.html">
            
                
                    <a href="../sqlite/data model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.12.1.</b>
                        
                        数据模型设计
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.12.2" data-path="sqlite/statusdal.html">
            
                
                    <a href="../sqlite/statusdal.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.12.2.</b>
                        
                        数据访问层
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.12.3" data-path="sqlite/clean cache.html">
            
                
                    <a href="../sqlite/clean cache.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.12.3.</b>
                        
                        清理数据缓存
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.13" data-path="ending/index.html">
            
                
                    <a href="../ending/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.</b>
                        
                        微博收尾
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.13.1" data-path="ending/status create at.html">
            
                
                    <a href="../ending/status create at.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.1.</b>
                        
                        微博时间
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.13.2" data-path="ending/regex.html">
            
                
                    <a href="../ending/regex.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.2.</b>
                        
                        正则表达式
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.13.3" data-path="ending/emoticon string.html">
            
                
                    <a href="../ending/emoticon string.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.3.</b>
                        
                        表情字符串
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.13.4" data-path="ending/fflabel.html">
            
                
                    <a href="../ending/fflabel.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.4.</b>
                        
                        FFLabel
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.13.5" data-path="ending/textkit.html">
            
                
                    <a href="../ending/textkit.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.13.5.</b>
                        
                        TextKit
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="0.14" data-path="appendix/readme.html">
            
                
                    <a href="../appendix/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.</b>
                        
                        附录
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="0.14.1" data-path="appendix/image assets.html">
            
                
                    <a href="../appendix/image assets.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.1.</b>
                        
                        图片素材
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.14.2" data-path="appendix/cocoa pod.html">
            
                
                    <a href="../appendix/cocoa pod.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.2.</b>
                        
                        cocoa pod
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.14.3" data-path="appendix/singleton.html">
            
                
                    <a href="../appendix/singleton.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.3.</b>
                        
                        单例
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.14.4" data-path="appendix/swift_vs_oc.html">
            
                
                    <a href="../appendix/swift_vs_oc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.4.</b>
                        
                        为什么要学习 Swift
                    </a>
                
            
            
        </li>
    
        <li class="chapter " data-level="0.14.5" data-path="appendix/emoji.html">
            
                
                    <a href="../appendix/emoji.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.14.5.</b>
                        
                        emoji
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                Published with GitBook
            </a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Table of Contents"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Font Settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Share"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">
                    Share on Twitter
                </button>
                <button type="button" data-sharing="google-plus" class="button">
                    Share on Google
                </button>
                <button type="button" data-sharing="facebook" class="button">
                    Share on Facebook
                </button>
                <button type="button" data-sharing="weibo" class="button">
                    Share on Weibo
                </button>
                <button type="button" data-sharing="instapaper" class="button">
                    Share on Instapaper
                </button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Google"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
    
    
    


    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >新浪微博开发笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="%E9%85%8D%E5%9B%BE%E8%A7%86%E5%9B%BE">&#x914D;&#x56FE;&#x89C6;&#x56FE;</h1>
<h2 id="%E7%9B%AE%E6%A0%87">&#x76EE;&#x6807;</h2>
<ul>
<li>&#x589E;&#x52A0;&#x914D;&#x56FE;&#x89C6;&#x56FE;</li>
<li>&#x52A8;&#x6001;&#x4FEE;&#x6539;&#x884C;&#x9AD8;</li>
<li>&#x884C;&#x9AD8;&#x7F13;&#x5B58;</li>
<li>&#x56FE;&#x7247;&#x586B;&#x5145;&#x6A21;&#x5F0F;</li>
</ul>
<h2 id="%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0">&#x4EE3;&#x7801;&#x5B9E;&#x73B0;</h2>
<h3 id="%E7%95%8C%E9%9D%A2%E5%87%86%E5%A4%87">&#x754C;&#x9762;&#x51C6;&#x5907;</h3>
<ul>
<li>&#x65B0;&#x5EFA; <code>StatusCellPictureView.swift</code> &#x7EE7;&#x627F;&#x81EA; <code>UICollectionView</code></li>
<li>&#x5728; <code>StatusCell</code> &#x4E2D;&#x5B9A;&#x4E49;&#x61D2;&#x52A0;&#x8F7D;&#x5C5E;&#x6027;&#xFF0C;&#x5E76;&#x4E14;&#x6309;&#x7167;&#x987A;&#x5E8F;&#x8C03;&#x6574;&#x63A7;&#x4EF6;&#x987A;&#x5E8F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x914D;&#x56FE;&#x89C6;&#x56FE;</span>
private lazy <span class="hljs-keyword">var</span> pictureView: <span class="hljs-type">StatusCellPictureView</span> = <span class="hljs-type">StatusCellPictureView</span>()
</code></pre>
<blockquote>
<p>&#x5B9A;&#x4E49;&#x63A7;&#x4EF6;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x53EF;&#x80FD;&#xFF0C;&#x6700;&#x597D;&#x6309;&#x7167;&#x4ECE;&#x4E0A;&#x81F3;&#x4E0B;&#xFF0C;&#x4ECE;&#x5DE6;&#x81F3;&#x53F3;&#x7684;&#x987A;&#x5E8F;&#x5B9A;&#x4E49;&#x63A7;&#x4EF6;&#xFF0C;&#x8FD9;&#x6837;&#x65B9;&#x4FBF;&#x540E;&#x671F;&#x7684;&#x7EF4;&#x62A4;&#x548C;&#x6269;&#x5C55;</p>
</blockquote>
<ul>
<li>&#x5728; <code>setupUI</code> &#x51FD;&#x6570;&#x4E2D;&#x6DFB;&#x52A0;&#x914D;&#x56FE;&#x89C6;&#x56FE;</li>
</ul>
<pre><code class="lang-swift">contentView.addSubview(pictureView)

...

<span class="hljs-comment">// &#x914D;&#x56FE;&#x89C6;&#x56FE;</span>
pictureView.snp_makeConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.<span class="hljs-keyword">left</span>.equalTo(contentLabel.snp_left)
    make.top.equalTo(contentLabel.snp_bottom).offset(<span class="hljs-type">WBCellMargin</span>)
    make.width.equalTo(<span class="hljs-number">290</span>)
    make.height.equalTo(<span class="hljs-number">290</span>)
}
<span class="hljs-comment">// &#x5E95;&#x90E8;&#x89C6;&#x56FE;</span>
bottomView.snp_makeConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.top.equalTo(pictureView.snp_bottom).offset(<span class="hljs-type">WBCellMargin</span>)
    make.<span class="hljs-keyword">left</span>.equalTo(contentView.snp_left)
    make.<span class="hljs-keyword">right</span>.equalTo(contentView.snp_right)
    make.height.equalTo(<span class="hljs-number">44</span>)
    make.bottom.equalTo(contentView.snp_bottom)
}
</code></pre>
<blockquote>
<p>&#x8FD0;&#x884C;&#x6D4B;&#x8BD5;&#xFF0C;&#x5D29;&#x6E83;&#xFF01;</p>
</blockquote>
<p>&#x9519;&#x8BEF;&#x4FE1;&#x606F;&#xFF1A;<code>reason: &apos;UICollectionView must be initialized with a non-nil layout parameter&apos;</code></p>
<ul>
<li>&#x91CD;&#x5199; <code>StatusPictureView</code> &#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// MARK: - &#x6784;&#x9020;&#x51FD;&#x6570;</span>
<span class="hljs-keyword">init</span>() {
    <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(frame: <span class="hljs-type">CGRectZero</span>, collectionViewLayout: <span class="hljs-type">UICollectionViewFlowLayout</span>())

    backgroundColor = <span class="hljs-type">UIColor</span>.lightGrayColor()
}

required <span class="hljs-keyword">init</span>?(coder aDecoder: <span class="hljs-type">NSCoder</span>) {
    fatalError(<span class="hljs-string">&quot;init(coder:) has not been implemented&quot;</span>)
}
</code></pre>
<h4 id="%E4%BF%AE%E6%94%B9%E9%85%8D%E5%9B%BE%E8%A7%86%E5%9B%BE%E5%AE%BD%E9%AB%98">&#x4FEE;&#x6539;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x5BBD;&#x9AD8;</h4>
<ul>
<li>&#x5728; <code>statusViewModel</code> &#x7684; didSet &#x4E2D;&#x6D4B;&#x8BD5;&#x4FEE;&#x6539;&#x9AD8;&#x5EA6;</li>
</ul>
<pre><code class="lang-swift">pictureView.snp_updateConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.height.equalTo(<span class="hljs-number">90</span> * (random() % <span class="hljs-number">4</span>))
}
</code></pre>
<p>&#x5728;&#x8868;&#x683C;&#x6EDA;&#x52A8;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;&#x5076;&#x5C14;&#x4F1A;&#x5728;&#x63A7;&#x5236;&#x53F0; <code>po</code> &#x7EA6;&#x675F;&#x9519;&#x8BEF;&#x7684;&#x60C5;&#x51B5;&#xFF01;&#x5E94;&#x8BE5;&#x662F; <code>Label</code> &#x884C;&#x9AD8;&#x52A8;&#x6001;&#x8BA1;&#x7B97;&#x7684;&#x60C5;&#x51B5;&#x5BFC;&#x81F4;&#x7684;</p>
<ul>
<li><code>&#x4E34;&#x65F6;</code>&#x4FEE;&#x6539;&#x63A7;&#x5236;&#x5668;&#x4E2D;&#x8868;&#x683C;&#x884C;&#x9AD8;&#x7684;&#x8BA1;&#x7B97;&#x65B9;&#x6CD5;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// &#x9884;&#x4F30;&#x884C;&#x9AD8;</span>
tableView.estimatedRowHeight = <span class="hljs-number">300</span>
<span class="hljs-comment">// &#x81EA;&#x52A8;&#x8BA1;&#x7B97;&#x884C;&#x9AD8;</span>
tableView.rowHeight = <span class="hljs-number">300</span>
</code></pre>
<ul>
<li>&#x53D6;&#x6D88; <code>bottomView</code> &#x76F8;&#x5BF9;&#x5E95;&#x8FB9;&#x7684;&#x7EA6;&#x675F;</li>
</ul>
<blockquote>
<p>&#x5728;&#x5B9E;&#x9645;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x4E00;&#x5B9A;&#x5148;&#x8981;&#x786E;&#x8BA4;&#x6280;&#x672F;&#x7684;&#x53EF;&#x884C;&#x6027;&#xFF01;</p>
</blockquote>
<h3 id="%E8%AE%A1%E7%AE%97%E8%A7%86%E5%9B%BE%E5%A4%A7%E5%B0%8F">&#x8BA1;&#x7B97;&#x89C6;&#x56FE;&#x5927;&#x5C0F;</h3>
<ul>
<li>&#x5B9A;&#x4E49;&#x5E38;&#x91CF;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x914D;&#x56FE;&#x9ED8;&#x8BA4;&#x5927;&#x5C0F;</span>
private <span class="hljs-keyword">let</span> <span class="hljs-type">WBPictureItemWidth</span>: <span class="hljs-type">CGFloat</span>     = <span class="hljs-number">90</span>
<span class="hljs-comment">/// &#x914D;&#x56FE;&#x9ED8;&#x8BA4;&#x95F4;&#x8DDD;</span>
private <span class="hljs-keyword">let</span> <span class="hljs-type">WBPictureItemMargin</span>: <span class="hljs-type">CGFloat</span>    = <span class="hljs-number">10</span>
</code></pre>
<ul>
<li>&#x8BBE;&#x7F6E;&#x5E03;&#x5C40;&#x5C5E;&#x6027;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// MARK: - &#x6784;&#x9020;&#x51FD;&#x6570;</span>
<span class="hljs-keyword">init</span>() {
    <span class="hljs-keyword">let</span> layout = <span class="hljs-type">UICollectionViewFlowLayout</span>()
    layout.itemSize = <span class="hljs-type">CGSize</span>(width: <span class="hljs-type">WBPictureItemWidth</span>, height: <span class="hljs-type">WBPictureItemWidth</span>)
    layout.minimumInteritemSpacing = <span class="hljs-type">WBPictureItemMargin</span>
    layout.minimumLineSpacing = <span class="hljs-type">WBPictureItemMargin</span>

    <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(frame: <span class="hljs-type">CGRectZero</span>, collectionViewLayout: layout)

    backgroundColor = <span class="hljs-type">UIColor</span>.lightGrayColor()
}
</code></pre>
<ul>
<li>&#x5728;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x4E2D;&#x5B9A;&#x4E49;&#x89C6;&#x56FE;&#x6A21;&#x578B;&#x5C5E;&#x6027;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x5FAE;&#x535A;&#x6570;&#x636E;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
<span class="hljs-keyword">var</span> statusViewModel: <span class="hljs-type">StatusViewModel</span>? {
    <span class="hljs-keyword">didSet</span> {

    }
}
</code></pre>
<ul>
<li>&#x5728; <code>StatusCell</code> &#x7684; <code>statusViewModel</code> &#x7684; <code>didSet</code> &#x4E2D;&#x4E3A;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x8BBE;&#x7F6E;&#x89C6;&#x56FE;&#x6A21;&#x578B;</li>
</ul>
<pre><code class="lang-swift">pictureView.viewModel = viewModel
</code></pre>
<ul>
<li>&#x5E38;&#x91CF;&#x51C6;&#x5907;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x6839;&#x636E;&#x914D;&#x56FE;&#x6570;&#x91CF;&#x8BA1;&#x7B97;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x5927;&#x5C0F;</span>
private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewSize</span><span class="hljs-params">()</span> -&gt; <span class="hljs-title">CGSize</span> </span>{
    <span class="hljs-comment">// 1. &#x5E38;&#x91CF;&#x51C6;&#x5907;</span>
    <span class="hljs-keyword">let</span> layout = collectionViewLayout <span class="hljs-keyword">as</span>! <span class="hljs-type">UICollectionViewFlowLayout</span>
    layout.itemSize = <span class="hljs-type">CGSize</span>(width: <span class="hljs-type">WBPictureItemWidth</span>, height: <span class="hljs-type">WBPictureItemWidth</span>)

    <span class="hljs-keyword">let</span> rowCount: <span class="hljs-type">CGFloat</span> = <span class="hljs-number">3</span>

    <span class="hljs-comment">// 2. &#x6839;&#x636E;&#x56FE;&#x7247;&#x6570;&#x91CF;&#x8BA1;&#x7B97;&#x89C6;&#x56FE;&#x5927;&#x5C0F;</span>
    <span class="hljs-keyword">let</span> <span class="hljs-built_in">count</span> = viewModel?.thumbnailUrls?.<span class="hljs-built_in">count</span> ?? <span class="hljs-number">0</span>
}
</code></pre>
<ul>
<li>&#x4E00;&#x5F20;&#x56FE;&#x7247;&#x8FD4;&#x56DE;&#x8BE5;&#x56FE;&#x7247;&#x7684;&#x5B9E;&#x9645;&#x5927;&#x5C0F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 1&gt; &#x5982;&#x679C;&#x6CA1;&#x6709;&#x56FE;&#x7247;</span>
<span class="hljs-keyword">if</span> <span class="hljs-built_in">count</span> == <span class="hljs-number">0</span> {
    <span class="hljs-keyword">return</span> <span class="hljs-type">CGSizeZero</span>
}

<span class="hljs-comment">// 2&gt; &#x5355;&#x5F20;&#x56FE;&#x7247;</span>
<span class="hljs-keyword">if</span> <span class="hljs-built_in">count</span> == <span class="hljs-number">1</span> {
    <span class="hljs-comment">// TODO: - &#x4E34;&#x65F6;&#x8BBE;&#x7F6E;&#x5927;&#x5C0F;&#xFF0C;&#x540E;&#x7EED;&#x5904;&#x7406;</span>
    <span class="hljs-keyword">let</span> size = <span class="hljs-type">CGSize</span>(width: <span class="hljs-number">150</span>, height: <span class="hljs-number">150</span>)
    layout.itemSize = size

    <span class="hljs-keyword">return</span> size
}
</code></pre>
<ul>
<li>4 &#x5F20;&#x56FE;&#x7247;&#xFF0C;&#x8FD4;&#x56DE; 2 * 2 &#x7684;&#x5927;&#x5C0F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 3&gt; 4&#x5F20;&#x56FE;&#x7247;&#xFF0C;&#x8FD4;&#x56DE; 2 * 2</span>
<span class="hljs-keyword">if</span> <span class="hljs-built_in">count</span> == <span class="hljs-number">4</span> {
    <span class="hljs-keyword">let</span> w = <span class="hljs-number">2</span> * <span class="hljs-type">WBPictureItemWidth</span> + <span class="hljs-type">WBPictureItemMargin</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">CGSize</span>(width: w, height: w)
}
</code></pre>
<ul>
<li>&#x5176;&#x4ED6;&#x6570;&#x91CF;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 4&gt; &#x5176;&#x4ED6;&#x56FE;&#x7247;</span>
<span class="hljs-keyword">let</span> row = <span class="hljs-type">CGFloat</span>((<span class="hljs-built_in">count</span> - <span class="hljs-number">1</span>) / <span class="hljs-type">Int</span>(rowCount) + <span class="hljs-number">1</span>)
<span class="hljs-keyword">let</span> w = rowCount * <span class="hljs-type">WBPictureItemWidth</span> + (rowCount - <span class="hljs-number">1</span>) * <span class="hljs-type">WBPictureItemMargin</span>
<span class="hljs-keyword">let</span> h = row * <span class="hljs-type">WBPictureItemWidth</span> + (row - <span class="hljs-number">1</span>) * <span class="hljs-type">WBPictureItemMargin</span>

<span class="hljs-keyword">return</span> <span class="hljs-type">CGSize</span>(width: w, height: h)
</code></pre>
<ul>
<li>&#x901A;&#x8FC7;&#x8BBE;&#x7F6E;&#x6570;&#x636E;&#x8BA1;&#x7B97;&#x89C6;&#x56FE;&#x5927;&#x5C0F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x5FAE;&#x535A;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
<span class="hljs-keyword">var</span> viewModel: <span class="hljs-type">StatusViewModel</span>? {
    <span class="hljs-keyword">didSet</span> {
        sizeToFit()
    }
}

<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">sizeThatFits</span><span class="hljs-params">(size: CGSize)</span> -&gt; <span class="hljs-title">CGSize</span> </span>{
    <span class="hljs-keyword">return</span> viewSize()
}
</code></pre>
<ul>
<li>&#x4FEE;&#x6539; <code>StatusCell</code> &#x4E2D;&#x7684; didSet &#x51FD;&#x6570;&#xFF0C;&#x8BBE;&#x7F6E;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x5927;&#x5C0F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// &#x8BBE;&#x7F6E;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
pictureView.viewModel = viewModel
<span class="hljs-comment">// &#x66F4;&#x65B0;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x7EA6;&#x675F;</span>
pictureView.snp_updateConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.width.equalTo(pictureView.bounds.width)
    make.height.equalTo(pictureView.bounds.height)
}
</code></pre>
<h3 id="%E8%AE%A1%E7%AE%97%E8%A1%8C%E9%AB%98">&#x8BA1;&#x7B97;&#x884C;&#x9AD8;</h3>
<ul>
<li>&#x8BA1;&#x7B97;&#x884C;&#x9AD8;&#x51FD;&#x6570;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x6839;&#x636E;&#x89C6;&#x56FE;&#x6A21;&#x578B;&#x8BA1;&#x7B97;&#x884C;&#x9AD8;</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - parameter vm: &#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - returns: &#x89C6;&#x56FE;&#x6A21;&#x578B;&#x5BF9;&#x5E94;&#x7684;&#x884C;&#x9AD8;</span>
<span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">rowHeight</span><span class="hljs-params">(vm: StatusViewModel)</span> -&gt; <span class="hljs-title">CGFloat</span> </span>{
    <span class="hljs-comment">// 1. &#x8BBE;&#x7F6E;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
    viewModel = vm

    <span class="hljs-comment">// 2. &#x66F4;&#x65B0;&#x7EA6;&#x675F;</span>
    layoutIfNeeded()

    <span class="hljs-comment">// 3. &#x8FD4;&#x56DE;&#x5E95;&#x90E8;&#x89C6;&#x56FE;&#x7684;&#x6700;&#x5927;&#x9AD8;&#x5EA6;</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">CGRectGetMaxY</span>(bottomView.frame)
}
</code></pre>
<ul>
<li>&#x5728;&#x63A7;&#x5236;&#x5668;&#x4E2D;&#x5B9E;&#x73B0;&#x884C;&#x9AD8;&#x4EE3;&#x7406;&#x65B9;&#x6CD5;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)</span> -&gt; <span class="hljs-title">CGFloat</span> </span>{

    <span class="hljs-comment">// 1. &#x53D6;&#x51FA;&#x5FAE;&#x535A;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
    <span class="hljs-keyword">let</span> vm = viewModel.statuses[indexPath.row]

    <span class="hljs-comment">// 2. &#x521B;&#x5EFA;Cell</span>
    <span class="hljs-keyword">let</span> cell = <span class="hljs-type">StatusCell</span>(style: .<span class="hljs-type">Default</span>, reuseIdentifier: <span class="hljs-type">WBStatusNormalCellID</span>)

    <span class="hljs-comment">// 3. &#x8FD4;&#x56DE;&#x884C;&#x9AD8;</span>
    <span class="hljs-keyword">return</span> cell.rowHeight(vm)
}
</code></pre>
<ul>
<li>&#x6839;&#x636E;&#x662F;&#x5426;&#x6709;&#x914D;&#x56FE;&#x8C03;&#x6574;&#x9876;&#x90E8;&#x7EA6;&#x675F;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// &#x66F4;&#x65B0;&#x914D;&#x56FE;&#x89C6;&#x56FE;&#x7EA6;&#x675F;</span>
pictureView.snp_updateConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.width.equalTo(pictureView.bounds.width)
    make.height.equalTo(pictureView.bounds.height)
    <span class="hljs-keyword">let</span> top = pictureView.bounds.height &gt; <span class="hljs-number">0</span> ? <span class="hljs-type">WBCellMargin</span> : <span class="hljs-number">0</span>
    make.top.equalTo(contentLabel.snp_bottom).offset(top)
}
</code></pre>
<h4 id="%E8%A1%8C%E9%AB%98%E7%BC%93%E5%AD%98">&#x884C;&#x9AD8;&#x7F13;&#x5B58;</h4>
<ul>
<li>&#x5728; <code>StatusViewModel</code> &#x4E2D;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x884C;&#x9AD8;</span>
<span class="hljs-keyword">var</span> rowHeight: <span class="hljs-type">CGFloat</span> = <span class="hljs-number">0</span>
</code></pre>
<ul>
<li>&#x4FEE;&#x6539;&#x884C;&#x9AD8;&#x51FD;&#x6570;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)</span> -&gt; <span class="hljs-title">CGFloat</span> </span>{

    <span class="hljs-comment">// 1. &#x53D6;&#x51FA;&#x5FAE;&#x535A;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
    <span class="hljs-keyword">let</span> vm = viewModel.statuses[indexPath.row]

    <span class="hljs-comment">// 2. &#x8FD4;&#x56DE;&#x7F13;&#x5B58;&#x884C;&#x9AD8;</span>
    <span class="hljs-keyword">if</span> vm.rowHeight &gt; <span class="hljs-number">0</span> {
        <span class="hljs-keyword">return</span> vm.rowHeight
    }

    <span class="hljs-comment">// 3. &#x521B;&#x5EFA;Cell</span>
    <span class="hljs-keyword">let</span> cell = <span class="hljs-type">StatusCell</span>(style: .<span class="hljs-type">Default</span>, reuseIdentifier: <span class="hljs-type">WBStatusNormalCellID</span>)

    <span class="hljs-comment">// 4. &#x7F13;&#x5B58;&#x884C;&#x9AD8;</span>
    vm.rowHeight = cell.rowHeight(vm)

    <span class="hljs-keyword">return</span> vm.rowHeight
}
</code></pre>
<h5 id="%E5%88%A9%E7%94%A8%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E8%AE%A1%E7%AE%97%E8%A1%8C%E9%AB%98">&#x5229;&#x7528;&#x89C6;&#x56FE;&#x6A21;&#x578B;&#x8BA1;&#x7B97;&#x884C;&#x9AD8;</h5>
<ul>
<li>&#x8BBE;&#x7F6E;&#x884C;&#x9AD8;&#x7684;&#x61D2;&#x52A0;&#x8F7D;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x884C;&#x9AD8;</span>
lazy <span class="hljs-keyword">var</span> rowHeight: <span class="hljs-type">CGFloat</span> = {
    <span class="hljs-built_in">print</span>(<span class="hljs-string">&quot;&#x8BA1;&#x7B97;&#x884C;&#x9AD8; <span class="hljs-subst">\(<span class="hljs-keyword">self</span>.status)</span>&quot;</span>)

    <span class="hljs-comment">// 1. &#x521B;&#x5EFA;Cell</span>
    <span class="hljs-keyword">let</span> cell = <span class="hljs-type">StatusCell</span>(style: .<span class="hljs-type">Default</span>, reuseIdentifier: <span class="hljs-type">WBStatusNormalCellID</span>)

    <span class="hljs-comment">// 2. &#x7F13;&#x5B58;&#x884C;&#x9AD8;</span>
    <span class="hljs-keyword">return</span> cell.rowHeight(<span class="hljs-keyword">self</span>)
}()
</code></pre>
<ul>
<li>&#x4FEE;&#x6539;&#x884C;&#x9AD8;&#x4EE3;&#x7406;&#x65B9;&#x6CD5;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)</span> -&gt; <span class="hljs-title">CGFloat</span> </span>{        
    <span class="hljs-keyword">return</span> viewModel.statuses[indexPath.row].rowHeight
}
</code></pre>
<h3 id="%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87">&#x8BBE;&#x7F6E;&#x56FE;&#x7247;</h3>
<ul>
<li>&#x5B9A;&#x4E49;&#x53EF;&#x91CD;&#x7528; Cell &#x6807;&#x8BC6;&#x7B26;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x914D;&#x56FE;&#x89C6;&#x56FE;&#x53EF;&#x91CD;&#x7528;&#x6807;&#x8BC6;&#x7B26;</span>
private <span class="hljs-keyword">let</span> <span class="hljs-type">WBPictureViewCellID</span> = <span class="hljs-string">&quot;WBPictureViewCellID&quot;</span>
</code></pre>
<ul>
<li>&#x51C6;&#x5907;&#x81EA;&#x5B9A;&#x4E49; Cell</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x5FAE;&#x535A;&#x914D;&#x56FE; Cell</span>
private <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StatusCellPictureViewCell</span>: <span class="hljs-title">UICollectionViewCell</span> </span>{

}
</code></pre>
<ul>
<li>&#x8BBE;&#x7F6E;&#x6570;&#x636E;&#x6E90;&#x5C5E;&#x6027; &amp; &#x6CE8;&#x518C;&#x53EF;&#x91CD;&#x7528; Cell</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// &#x6CE8;&#x518C;&#x53EF;&#x91CD;&#x7528;cell</span>
registerClass(<span class="hljs-type">StatusCellPictureViewCell</span>.<span class="hljs-keyword">self</span>, forCellWithReuseIdentifier: <span class="hljs-type">WBPictureViewCellID</span>)
<span class="hljs-comment">// &#x8BBE;&#x7F6E;&#x6570;&#x636E;&#x6E90;</span>
dataSource = <span class="hljs-keyword">self</span>
</code></pre>
<ul>
<li>&#x5229;&#x7528; extension &#x9075;&#x5B88;&#x534F;&#x8BAE;&#x5E76;&#x4E14;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// MARK: - UICollectionViewDataSource</span>
<span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">StatusCellPictureView</span>: <span class="hljs-title">UICollectionViewDataSource</span> </span>{
    <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">collectionView</span><span class="hljs-params">(collectionView: UICollectionView, numberOfItemsInSection section: Int)</span> -&gt; <span class="hljs-title">Int</span> </span>{
        <span class="hljs-keyword">return</span> viewModel?.thumbnailUrls?.<span class="hljs-built_in">count</span> ?? <span class="hljs-number">0</span>
    }

    <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">collectionView</span><span class="hljs-params">(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath)</span> -&gt; <span class="hljs-title">UICollectionViewCell</span> </span>{

        <span class="hljs-keyword">let</span> cell = collectionView.dequeueReusableCellWithReuseIdentifier(<span class="hljs-type">WBPictureViewCellID</span>, forIndexPath: indexPath) <span class="hljs-keyword">as</span>! <span class="hljs-type">StatusCellPictureViewCell</span>

        cell.backgroundColor = <span class="hljs-type">UIColor</span>.redColor()

        <span class="hljs-keyword">return</span> cell
    }
}
</code></pre>
<ul>
<li>&#x5237;&#x65B0;&#x6570;&#x636E;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x5FAE;&#x535A;&#x89C6;&#x56FE;&#x6A21;&#x578B;</span>
<span class="hljs-keyword">var</span> viewModel: <span class="hljs-type">StatusViewModel</span>? {
    <span class="hljs-keyword">didSet</span> {
        sizeToFit()

        reloadData()
    }
}
</code></pre>
<ul>
<li>Cell UI &#x51C6;&#x5907;</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// &#x5FAE;&#x535A;&#x914D;&#x56FE; Cell</span>
private <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StatusCellPictureViewCell</span>: <span class="hljs-title">UICollectionViewCell</span> </span>{

    <span class="hljs-keyword">var</span> imageUrl: <span class="hljs-type">NSURL</span>? {
        <span class="hljs-keyword">didSet</span> {
            iconView.sd_setImageWithURL(imageUrl)
        }
    }

    <span class="hljs-comment">// MARK: - &#x6784;&#x9020;&#x51FD;&#x6570;</span>
    <span class="hljs-keyword">override</span> <span class="hljs-keyword">init</span>(frame: <span class="hljs-type">CGRect</span>) {
        <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(frame: frame)

        contentView.addSubview(iconView)
        iconView.frame = bounds
    }

    required <span class="hljs-keyword">init</span>?(coder aDecoder: <span class="hljs-type">NSCoder</span>) {
        fatalError(<span class="hljs-string">&quot;init(coder:) has not been implemented&quot;</span>)
    }

    <span class="hljs-comment">// MARK: - &#x61D2;&#x52A0;&#x8F7D;&#x63A7;&#x4EF6;</span>
    private lazy <span class="hljs-keyword">var</span> iconView = <span class="hljs-type">UIImageView</span>()
}
</code></pre>
<ul>
<li>&#x8FD4;&#x56DE; Cell&#xFF0C;&#x8BBE;&#x7F6E;&#x56FE;&#x50CF;</li>
</ul>
<pre><code class="lang-swift">cell.imageURL = statusViewModel!.thumbnailUrls![indexPath.item]
</code></pre>
<ul>
<li>&#x8BBE;&#x7F6E;&#x5E03;&#x5C40;</li>
</ul>
<pre><code class="lang-swift">iconView.snp_makeConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.edges.equalTo(contentView.snp_edges)
}
</code></pre>
<h4 id="%E5%9B%BE%E7%89%87%E5%A1%AB%E5%85%85%E6%A8%A1%E5%BC%8F">&#x56FE;&#x7247;&#x586B;&#x5145;&#x6A21;&#x5F0F;</h4>
<p><img src="&#x56FE;&#x7247;&#x586B;&#x5145;&#x6A21;&#x5F0F;.png" alt=""></p>
<pre><code class="lang-swift">private lazy <span class="hljs-keyword">var</span> iconView: <span class="hljs-type">UIImageView</span> = {
    <span class="hljs-keyword">let</span> iv = <span class="hljs-type">UIImageView</span>()

    iv.contentMode = .<span class="hljs-type">ScaleAspectFill</span>
    iv.clipsToBounds = <span class="hljs-built_in">true</span>

    <span class="hljs-keyword">return</span> iv
}()
</code></pre>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../homepage/prepare for pictureview.html" class="navigation navigation-prev " aria-label="Previous page: 配图视图准备"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../homepage/retweeted_status.html" class="navigation navigation-next " aria-label="Next page: 转发微博"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
